<template>
  <my-navigation-bar :my-style='style'>功能</my-navigation-bar>
  <text class="icon-zuojiantou navbar" @tap="goBack" :style="flag?{top: '90rpx'}:''"></text>
 <view v-if="flag">
   <view class="function-box" :style="flag?{marginTop: '180rpx'}:''">
     <view class="item">
       <view class="left">
         <text class="icon-jianzhuanquan-"></text>
         <text class="name">红外夜视</text>
       </view>
       <view class="right">
        <switch checked @change="hongwaiChange" :checked="funcs.hongwai" color="#007AFF" />
       </view>
     </view>
     <view class="item active" @tap="goVolume">
       <view class="left">
         <text class="icon-shengyin_shiti"></text>
         <text class="name">设备音量</text>
       </view>
       <view class="right">
         <text class="t">当前音量：{{funcs.volume}}</text>
         <text class="icon-xiangyoujiantou"></text>
       </view>
     </view>
   </view>
 </view>
 <view :style="{transform: state.coverTransform, transition: state.coverTransition}" @touchmove="moveH" @touchstart="startH" @touchend="endH" v-else>
  <scroll-view scroll-y="true" class="scroll-box">
    <view class="function-box" :style="flag?{marginTop: '180rpx'}:''">
      <view class="item">
        <view class="left">
          <text class="icon-jianzhuanquan-"></text>
          <text class="name">红外夜视</text>
        </view>
        <view class="right">
         <switch checked @change="hongwaiChange" :checked="funcs.hongwai" color="#007AFF" />
        </view>
      </view>
      <view class="item active" @tap="goVolume">
        <view class="left">
          <text class="icon-shengyin_shiti"></text>
          <text class="name">设备音量</text>
        </view>
        <view class="right">
          <text class="t">当前音量：{{funcs.volume}}</text>
          <text class="icon-xiangyoujiantou"></text>
        </view>
      </view>
    </view>
  </scroll-view>
 </view>
</template>

<script setup>
  import myNavigationBarVue from "../../components/my-navigation-bar/my-navigation-bar.vue";
  import {
    computed,
    onBeforeMount,
    reactive
  } from "vue";
  import {
    onShow
  } from '@dcloudio/uni-app'
  import useBounceFunc from "../../hooks/bounce.js";
  const {state, moveH, startH, endH} = useBounceFunc();
  const flag = computed(() => {
    return getApp().globalData.isIphoneX;
  })
  const funcs = reactive({
    hongwai: false,
    volume: 50,
  })
  const style = {
    textAlign: 'center',
    paddingLeft: 0,
    backgroundColor: "#F2F2F2"
  };
  onShow(() => {
    const {
      hongwai,
      volume,
    } = getApp().globalData;
    funcs.hongwai = hongwai;
    funcs.volume = volume;
  });
  const hongwaiChange = (e) => {
    getApp().globalData.hongwai = e.detail.value;
  }
  //跳转
  const goVolume = () => {
    uni.navigateTo({
      url: "/subPkgPerson/funcDetail/funcDetail?type=1"
    })
  };
  const goBack = () => {
    uni.navigateBack()
  }
</script>

<style scoped lang="scss">
  .navbar {
    position: fixed;
    top: 63rpx;
    left: 30rpx;
    z-index: 100;
    font-size: 48rpx;
    font-weight: 500;
    color: #515151;
  }
.scroll-box{
  height: 100vh;
  background-color: #F2F2F2;
}
  .function-box {
    margin-top: 150rpx;
    background-color: #F2F2F2;
    height: 100vh;
    .active{
      &:active{
        background-color: #F2F2F2;
      }
    }
    .item {
      box-sizing: border-box;
      padding: 35rpx 45rpx;
      height: 130rpx;
      background-color: #fff;
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 45rpx;

      &:not(:first-child) {
        margin-top: 20rpx;
      }

      .left {
        .icon-jianzhuanquan- {
          font-size: 55rpx;
          color: #515151;
        }

        .icon-shengyin_shiti {
          font-size: 55rpx;
          color: #515151;
        }

        .icon-deng {
          font-size: 55rpx;
          color: #D81E06;
        }

        .icon-qingjingmoshitubiaojiudian_shuimian {
          font-size: 55rpx;
          color: #2C2C2C;
        }

        .name {
          margin-left: 30rpx;
          font-weight: 700;
        }
      }

      .right {
        position: relative;

        .t {
          position: relative;
          top: -6rpx;
          margin-right: 10rpx;
          color: #666;
          font-size: 30rpx;

        }
      }

      .icon-xiangyoujiantou {
        font-size: 45rpx;
      }
    }
  }
</style>
